<template>
  <div>
    <div>
      <indication :indicationData="indicationData"></indication>
    </div>
    <div class="s-article-show flex flex-h">
      <div class="article-content-panel">
        <h1 class="s-article-title">{{article.showTitle}}</h1>
        <div class="article-info flex flex-h-reverse">
          <span>{{article.createTime}}</span>
        </div>
        <div v-html="article.showContent" class="s-article-content markdown-body"></div>
      </div>
      <div class="dir-tree">
        <article-tree></article-tree>
      </div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/article.css'
import hljs from 'highlight.js'
import '../../node_modules/highlight.js/styles/github.css'
import axios from '../../node_modules/axios/dist/axios'
import marked from 'marked/lib/marked'
import '../assets/css/github-markdown.css'
import articleTree from './common/ArticleTree'
import {formatDate} from '../util/DateUtil.js'
import indication from './common/Indication'

marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false,
  highlight: function (code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(lang, code, true).value
    } else {
      return hljs.highlightAuto(code).value
    }
  }
})
export default {
  data () {
    return {
      indicationData: [{}],
      article: {
        showTitle: '',
        showContent: '',
        fontNum: '',
        createTime: ''
      }
    }
  },
  mounted () {
    this.loadArticle({nodeId: this.$route.params.nodeId})
    this.initIndication()
  },
  methods: {
    initIndication () {
      this.indicationData = [
        {name: '文章', path: '/article'},
        {name: '专题', path: '/subject'}]
    },
    loadArticle (data) {
      let _this = this
      axios.get('/article/loadArticle', {params: {articleKey: data.nodeId}}).then(res => {
        if (res.data.status === 200) {
          _this.article.showTitle = res.data.datas.showTitle
          _this.article.showContent = marked(res.data.datas.showContent)
          _this.article.fontNum = res.data.datas.fontNum
          _this.article.createTime = formatDate(new Date(res.data.datas.createDate), 'yyyy-MM-dd hh:mm')
          // 指示栏
          _this.indicationData.push({name: res.data.datas.subjectName, path: {path: '/allArticle', query: {nodeId: res.data.datas.subjectNodeId, searchTitle: res.data.datas.subjectName}}})
          _this.indicationData.push({name: _this.article.showTitle, path: `/specificArticle/${res.data.datas.nodeId}`})
        }
      })
    }
  },
  components: {
    articleTree,
    indication
  },
  watch: {
    '$route' (to, from) {
      this.loadArticle({nodeId: this.$route.params.nodeId})
      this.initIndication()
    }
  }
}
</script>

<style scoped>
.s-article-show {
  width: 960px;
}
.s-article-show>div {
  float: left
}
.article-content-panel {
  width: 740px;
  background: white;
  margin-left:2px;
  padding-left: 8px;
  padding-right: 8px;
  color: black;
  background-color: #f5f5d5;
}
.s-article-content {
  padding-bottom: 30px;
  line-height: 1.8;
  font-size: 14px;
  font-family: "-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif";
}
.s-article-title {
  font-size: 26px;
  line-height: 48px;
  margin-top: 15px;
  text-align: left;
  font-style: italic;
  color: black;
  font-family: "-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif";
}
.article-info {
  font-size: 14px;
  color: grey;
  margin-bottom: 20px;
}
.tree-title {
  margin-left: 5px;
}
</style>
